<!-- TODO -->
<template>
  <div>
    <!-- header -->
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px] mt-[15px]"
        :inline="true"
        :model="queryParams"
      >
        <el-form-item label="用户信息">
          <el-input
            class="w-[240px] h-[32px]"
            v-model="queryParams.user_info"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            class="w-[240px] h-[32px]"
            v-model="queryParams.mobile"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="跟进状态">
          <el-select placeholder="全部" v-model="queryParams.status">
            <el-option label="全部" value="" />
            <el-option label="待跟进" value="1" />
            <el-option label="已跟进" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <el-table size="large" class="mt-[14px]" :data="pager.lists">
        <el-table-column label="用户信息" min-width="160">
          <template #default="{ row }">
            <div class="flex items-center min-w-[60px]">
              <el-image
                style="width: 60px; height: 60px"
                :src="getImageUrl(row.avatar)"
                :preview-src-list="[row.avatar]"
                :hide-on-click-modal="true"
                :preview-teleported="true"
                :fit="'cover'"
              ></el-image>
              <div class="ml-2">{{ row.nickname }}</div>
            </div></template
          >
        </el-table-column>
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="联系方式" prop="mobile" />
        <el-table-column label="提货地址" prop="address" />
        <el-table-column label="申请时间" prop="create_time" />
        <el-table-column label="状态" prop="status_desc" />
        <el-table-column label="操作" fixed="right" min-width="160">
          <template #default="{ row }">
            <!-- <div >
              <popup
                class="-mt-4 inline"
                @confirm="handleRefund(row?.id)"
                content="确定要重新退款吗？"
                title="重新退款"
              >
                <template #trigger>
                  <el-link type="primary" :underline="false">重新退款</el-link>
                </template>
              </popup>
            </div> -->
            <el-button
              type="primary"
              link
              @click="handleApply(row)"
              v-if="row.status == 1"
            >
              确认跟进
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { usePaging } from "@/hooks/usePaging";
import {
  teamheadApplylists,
  teamheadapplyStatus,
  areaLists,
} from "@/api/teamhead";
import feedback from "@/utils/feedback";
import { useDictOptions } from "@/hooks/useDictOptions";
import useAppStore from "@/stores/modules/app";

const { getImageUrl } = useAppStore();
const queryParams = reactive({
  user_info: "",
  mobile: "",
  status: "",
});
const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: teamheadApplylists,
  params: queryParams,
});
getLists();
//确认跟进
const handleApply = async (row: any) => {
  await feedback.confirm(`你是否跟进团长${row.nickname}的入驻申请？`);
  await teamheadapplyStatus({ id: row.id });
  getLists();
};
//选择框数据
const { optionsData } = useDictOptions<{
  arealists: any[];
}>({
  arealists: {
    api: areaLists,
  },
});
console.log(pager.lists);
</script>
<style lang="scss" scope>
//TODO
.el-alert--warning.is-light {
  background-color: rgba(246, 248, 255, 1);
  color: rgba(64, 115, 250, 1);
}
</style>
